<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />

    <link href="../../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/change_form.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/changeother.css"/>
</head>
<body class="gray contentPadding">
<div class="left_tree left_doc hFill">
    <form class="form-horizontal" role="form">
        <div class="form">
            <label class="control-label">目录:</label>
            <div class="left_tree_se">
                <input type="text" id="plugins4_q" class="form-control input-small input-inline">
                <i class="fa fa-search search-icon"></i>
            </div>
        </div>
    </form>
    <!-- ======================================   tree开始  ====================================================== -->
    <div class="portlet-body">
        <div id="tree_3" >
        </div>
    </div>
    <!-- ======================================   tree结束  ====================================================== -->
</div>
<div class="right_tbale right_doc hFill">
    <div class="form-group">
        <h3 class="col-md-6 col-xs-12 paddingZeroL title">   taobao.user.buyer.get( 查询买家信息API )</h3>
        <p class="col-md-6 col-xs-12 label_on_max">接口类型：分页查询</p>
    </div>
    <div class="margin-bottom-10 label_on_max">
        服务备注说明文字xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </div>

    <div class="portlet box green">
        <div class="portlet-title">
            <div class="caption">请求参数</div>
            <div class="tools">
                <a href="javascript:;" class="collapse"> </a>
            </div>
        </div>
        <div class="portlet-body">
            <table class="layui-table" id="LAY_table_user" lay-filter="user"></table>
            <div class="form-body">
                <div class="form-group">
                    <div class="data_name bg-white">
                        <h3>查询条件(where)  参数</h3>
                    </div>
                    <table class="layui-table" id="LAY_table_user2" lay-filter="user"></table>
                </div>
                <div class="form-last-group">
                    <div class="data_name bg-white">
                        <h3>可返回字段(cols)  参数</h3>
                    </div>
                    <table class="layui-table" id="LAY_table_user3" lay-filter="user"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="portlet box green">
        <div class="portlet-title">
            <div class="caption">响应参数</div>
            <div class="tools">
                <a href="javascript:;" class="collapse"> </a>
            </div>
        </div>
        <div class="portlet-body">
            <table class="layui-table" id="LAY_table_user4" lay-filter="user"></table>

        </div>
    </div>
    <div class="portlet box green">
        <div class="portlet-title">
            <div class="caption">JSON返回示例</div>
            <div class="tools">
                <a href="javascript:;" class="collapse"> </a>
            </div>
        </div>
        <div class="portlet-body">
            <div class="showJson layui-bg-gray">
                "requestId": "0134563333335678",

                "code": 0,

                "msg": "",

                "count": 21,

                "data": [

                {

                "id": 10000,

                "username": "user-0",

                "sex": "女"

                },

                {

                "id": 10001,

                "username": "user-1",

                "sex": "男",

                }]

                }
            </div>
        </div>
    </div>

</div>

</body>
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>


<script src="../../assets/global/scripts/app.min.js" type="text/javascript"></script>

<script src="../../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jstree/src/jstree.search.js"></script>
<!--
<script src="../../assets/global/plugins/jstree/dist/ui-tree.min.js" type="text/javascript"></script>
-->
<script src="../../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>

<script src="../../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/layui/layui.all.js"></script>

<script>
    $(function () {
        //搜索框
        $("#tree_3").jstree({
            core: {
                themes: {
                    responsive: !1,
                    "icons" : false,
                    "dots" : false
                },
                check_callback: !0,
                data: [
                    {
                        text: "查询API",
                        'state' : {
                            'opened' : true,
                        },
                        children: [{
                            text: "服务一",
                        }, {
                            text: "服务二",
                        }, {
                            text: "服务三",
                        }]
                    }]
            },
            plugins: ['wholerow','types',"search","contextmenu"]

        });

        var to = false;
        $('#plugins4_q').keyup(function () {
            if (to) {
                clearTimeout(to);
            }
            to = setTimeout(function () {
                var v = $('#plugins4_q').val();
                $('#tree_3').jstree(true).search(v);
            }, 250);
        });

        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user2'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user3'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
        layui.use('table', function(){
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user4'
                ,url: 'layui_table.json'
                ,cols: [[
                    {field: 'so', title: '选择',templet:"#radioTpl",unresize:true}
                    ,{field:'id', title: '数据对象', sort: true}
                    ,{field:'sex', title: '记录条数', sort: true}
                ]]
                ,cellMinWidth: 80
                ,id: 'testReload'
                ,page: true
                ,done :function(){
                    console.log('hahha')
                }
            });



            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
    })

</script>
</html>